<script setup lang="ts">
import { useToast } from "wot-design-uni";
import { useNavigateTo } from "@/utils/router";

const show = ref(true);
const tab = ref<number>(0);
const list = ref<string[]>(["评论", "点赞", "贡献", "打赏"]);

const current = ref("点赞");
const active = ref(0);
const value = ref<string>("");
function handleChange(event) {
  console.log(event);
}
const value2 = ref(["1"]);
const value3 = ref<string>("");
const defaultValue = ref<number>(Date.now());

function handleConfirm({ value }) {
  console.log(new Date(value));
}
const value4 = ref<string>("");
const value5 = ref<number>(1);
function handleChange1({ value }) {
  console.log(value);
}

const Toast = useToast();

const model = reactive<{
  value1: string;
  value2: string;
}>({
  value1: "",
  value2: ""
});

const form = ref();

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        Toast.show({
          msg: "校验通过"
        });
      }
    })
    .catch((error) => {
      console.log(error, "error");
    });
}
const checked = ref<boolean>(true);
const value6 = ref<number>(0);

function handleChange2({ value }) {
  console.log(value);
}
const time = ref<number>(30 * 60 * 60 * 1000);
const fileList = ref<any[]>([
  {
    url: "https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg"
  }
]);

const action: string = "https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload";

function handleChange3({ fileList: files }) {
  fileList.value = files;
}
onPageScroll((e) => {
  console.log(e);
});
</script>

<template>
  <view>
    <wd-navbar fixed placeholder title="个人中心" safe-area-inset-top />
    <wd-button type="success">成功按钮</wd-button>
    <wd-popup v-model="show" custom-style="border-radius:32rpx;" @close="show = false">
      <text class="custom-txt">弹弹弹</text>
    </wd-popup>
    <wd-tabs v-model="tab">
      <template v-for="item in 4" :key="item">
        <wd-tab :title="`标签${item}`">
          <view class="content">内容{{ item }}</view>
        </wd-tab>
      </template>
    </wd-tabs>
    <wd-segmented :options="list" v-model:value="current" :vibrate-short="true"></wd-segmented>
    <wd-sidebar v-model="active">
      <wd-sidebar-item :value="0" label="标签名称" />
      <wd-sidebar-item :value="1" label="标签名称" />
      <wd-sidebar-item :value="2" label="标签名称" />
    </wd-sidebar>
    <wd-input type="text" v-model="value" placeholder="请输入用户名" @change="handleChange" />
    <wd-checkbox-group v-model="value2" cell shape="button">
      <wd-checkbox model-value="1" disabled>选项一</wd-checkbox>
      <wd-checkbox model-value="2">选项二</wd-checkbox>
      <wd-checkbox model-value="3">选项三</wd-checkbox>
      <wd-checkbox model-value="4">选项四</wd-checkbox>
      <wd-checkbox model-value="5">选项五</wd-checkbox>
      <wd-checkbox model-value="6">选项六</wd-checkbox>
      <wd-checkbox model-value="7">选项七</wd-checkbox>
    </wd-checkbox-group>
    <wd-datetime-picker v-model="value3" :default-value="defaultValue" label="日期选择" @confirm="handleConfirm" />
    <wd-textarea v-model="value4" placeholder="请填写评价" />
    <wd-input-number v-model="value5" @change="handleChange1" />
    <wd-form ref="form" :model="model">
      <wd-cell-group border>
        <wd-input label="用户名" label-width="100px" prop="value1" clearable v-model="model.value1" placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
        <wd-input label="密码" label-width="100px" prop="value2" show-password clearable v-model="model.value2" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
      </wd-cell-group>
      <view class="footer">
        <wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
      </view>
    </wd-form>
    <wd-switch v-model="checked" />
    <wd-search placeholder="请输入订单号/订单名称" cancel-txt="搜索" />
    <wd-sort-button title="价格" v-model="value6" @change="handleChange2" />
    <wd-count-down :time="time" />
    <wd-upload :file-list="fileList" image-mode="aspectFill" :action="action" @change="handleChange3"></wd-upload>
    <view @tap="useNavigateTo('/pages-user/index/index')">mine</view>
  </view>
</template>

<style lang="scss" scoped>
.custom-txt {
  color: black;
  width: 400rpx;
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  border-radius: 32rpx;
}
</style>
